<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery UI Datepicker - Animations</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<link rel="stylesheet" href="/resources/demos/style.css">
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<script>
			$( function() {
    $( "#datepicker" ).datepicker();
    $( "#anim" ).on( "change", function() {
      $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
    });
  } );
  </script>
	</head>
	<body>

		<p>Date: <input type="text" id="datepicker" size="30"></p>

		<p>Animations:<br>
			<select id="anim">
				<option value="show">Show (default)</option>
				<option value="slideDown">Slide down</option>
				<option value="fadeIn">Fade in</option>
				<option value="blind">Blind (UI Effect)</option>
				<option value="bounce">Bounce (UI Effect)</option>
				<option value="clip">Clip (UI Effect)</option>
				<option value="drop">Drop (UI Effect)</option>
				<option value="fold">Fold (UI Effect)</option>
				<option value="slide">Slide (UI Effect)</option>
				<option value="">None</option>
			</select>
		</p>


	</body>
</html>
